/* eslint object-shorthand: 0,space-before-function-paren:0, prefer-template:0, wrap-iife:0 */
import React, { Component } from 'react';

const ReactHighcharts = require('react-highcharts');
const Highcharts = require('highcharts');
const HighchartsExporting = require('highcharts-exporting') // 动态图片导出会报错，但不影响导出
HighchartsExporting(ReactHighcharts.Highcharts);


let intervalId;

const config = {
  chart: {
    type: 'spline',
    animation: Highcharts.svg,
    marginRight: 10,
    height: 240,
    events: {
      load: function() {
        // set up the updating of the chart each second
        const series1 = this.series[0];
        const series2 = this.series[1];
        intervalId = setInterval(() => {
          const x = new Date().getTime(); // current time
          const y = Math.random();
          series1.addPoint([x, y], true, true);
          series2.addPoint([x+0.1, y+0.2], true, true);
        }, 1000);
      },
    },
  },
  title: {
    text: '',
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150,
    title: {
      text: '时间(秒)',
    },
  },
  yAxis: {
    tickInterval: 1,
    title: {
      text: '构建次数',
    },
    plotLines: [
      {
        value: 0,
        width: 1,
        color: '#808080',
      },
    ],
  },
  tooltip: {
    formatter: function() {
      return (
        '<b>' +
        this.series.name +
        '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
        '<br/>' +
        Highcharts.numberFormat(this.y, 2)
      );
    },
  },
  legend: {
    enabled: true,
  },
  exporting:{
    enabled:false
  },
  // exporting: {
  //   //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效
  //   buttons:{    //配置按钮选项
  //     printButton:{    //配置打印按钮
  //       width:50,
  //       symbolSize:20,
  //       borderWidth:2,
  //       borderRadius:0,
  //       hoverBorderColor:'red',
  //       height:30,
  //       symbolX:25,
  //       symbolY:15,
  //       x:-200,
  //       y:20
  //     },
  //     exportButton:{    //配置导出按钮
  //       width:50,
  //       symbolSize:20,
  //       borderWidth:2,
  //       borderRadius:0,
  //       hoverBorderColor:'red',
  //       height:30,
  //       symbolX:25,
  //       symbolY:15,
  //       x:-150,
  //       y:20
  //     },
  //   },
  //   filename:'52wulian.org',//导出的文件名
  //   type:'image/png',//导出的文件类型
  //   width:800    //导出的文件宽度
  // },
  credits: { // highcharts logo
    enabled: false,
  },


  series: [
    {
      name: 'Random data',
      color: '#5e83fb',
      data: (function() {
        // generate an array of random data
        const data = [];
        const time = new Date().getTime();

        let i;

        for (i = -19; i <= 0; i += 1) {
          data.push({
            x: time + i * 1000,
            y: Math.random() * (2 - 1) + 1,
          });
        }
        return data;
      })(),
    },
    {
      name: 'Random data1',
      color: '#f40',
      data: (function() {
        // generate an array of random data
        const data = [];
        const time = new Date().getTime();

        let i;

        for (i = -19; i <= 0; i += 1) {
          data.push({
            x: time + i * 1000,
            y: Math.random() * (2 - 1) + 1,
          });
        }
        return data;
      })(),
    },


  ],
};

export default class SplineChart extends Component {
  static displayName = 'SplineChart';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillUnmount() {
    clearInterval(intervalId);
  }

  render() {
    return <ReactHighcharts config={config} />;
  }
}
